<template>
    <div style="display: flex;background-color:rgb(221.7, 222.6, 224.4);width:100%;height:1000px ">
        <el-form ref="dataFormRef" :model="dataForm" label-width="110px" style="margin-top: 25px;width: 800px"
            :rules="rules">
            <el-form-item label="路线id" prop="routeId">
                <el-input-number v-model="dataForm.routeId" placeholder="请输入" />
            </el-form-item>
            <template v-for="(passenger, index) in dataForm.passengerList" :key="`passenger-${index}`">
                <el-form-item :label="`乘客${index+1}电话`" prop="passengerList">
                    <div style="display: flex; align-items: center;">
                        <el-input v-model="passenger.phoneNumber" placeholder="请输入" style="width: 290px;" />
                        <el-button type="danger" size="small" style="margin-left: 10px;" @click="removePassenger(index)">删除</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="座位类型">
                    <el-select v-model="passenger.seatType" placeholder="请选择座位类型">
                        <el-option v-for="item in seatTypeOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="座位行号">
                    <el-input-number v-model="passenger.seatRowNo" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="座位列号">
                    <el-input-number v-if="passenger.seatType === 0" v-model="passenger.seatColNo" placeholder="请输入" :min="1" :max="4" />
                    <el-input-number v-else v-model="passenger.seatColNo" placeholder="请输入" :min="1" :max="6" />
                </el-form-item>
            </template>
            <el-button type="primary" size="small" @click="addPassenger" style="margin-left: 110px; margin-bottom: 10px;">添加乘客</el-button>
            <el-form-item label="支付用户电话" prop="paidUserPhoneNumber">
                <el-input v-model="dataForm.paidUserPhoneNumber" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="订单时间">
                <el-date-picker v-model="dataForm.orderTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择订单时间" style="width: 300px;"/>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select v-model="dataForm.status" placeholder="请选择订单状态">
                    <el-option v-for="item in orderStatusOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item style="margin-top: 30px;">
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="router.push({ name: 'order' })">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import {useRouter } from 'vue-router'
import { ref, reactive, getCurrentInstance } from 'vue'
const router = useRouter();
const { proxy } = getCurrentInstance();
const dataFormRef = ref(null);
// 表单
const dataForm = reactive({
    routeId: null,
    passengerList: [{ phoneNumber: null, seatType: 1, seatRowNo: 1, seatColNo: 1 }], // 乘客信息，包括座位
    paidUserId: null,
    status: 0
});
// 表单提交校验
const rules = {
    routeId: [{ required: true, message: '请输入路线id', trigger: 'blur' }],
    passengerList: [
        {
            validator: (rule, value) => {
                // 校验每个电话号码是否为 11 位数字
                for (let passenger of value) {
                    if (!passenger.phoneNumber || !/^1[3456789]\d{9}$/.test(passenger.phoneNumber)) {
                        return new Error('所有乘客电话号码均为必填项且必须格式正确');
                    }
                    if (!passenger.seatRowNo || !passenger.seatColNo){
                        return new Error('所有乘客座位行号和列号均为必填项');
                    }
                }
                return true;
            },
            trigger: ['blur', 'change'],
        },
    ],
    paidUserPhoneNumber: [
        { required: true, message: '请输入电话号码', trigger: 'blur' },
        { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],
}
// 添加乘客输入框
const addPassenger = () => {
    dataForm.passengerList.push({ phoneNumber: null, seatType: 1, seatRowNo: null, seatColNo: null });
};

// 移除乘客输入框
const removePassenger = (index) => {
    if (dataForm.passengerList.length > 1) {
        dataForm.passengerList.splice(index, 1);
    } else {
        proxy.Message.error('至少需要添加一位乘客');
    }
};
// 座位类型
const seatTypeOptions = ref([
    {
        label: '商务座',
        value: 0
    },
    {
        label: '普通座',
        value: 1
    }
])
// 订单状态
const orderStatusOptions = ref([
    {
        label: '未支付',
        value: 0
    },
    {
        label: '已支付',
        value: 1
    },
    {
        label: '已取消',
        value: 2
    }
])
/**
 * 表单提交
 */
const onSubmit = () => {
    // 校验
    dataFormRef.value.validate((valid) => {
        if (!valid) {
            proxy.Message.error("请检查输入信息是否正确");
        } else {
            proxy.Confirm({
                message: '确定提交？',
                okfun: async () => {
                    let params = {};
                    Object.assign(params, dataForm);
                    let result = await proxy.Request.requestJSON({
                        url: proxy.Api.addOrder,
                        params: params
                    });
                    if (!result) {
                        return;
                    }
                    proxy.Message.success("提交成功");
                    router.push({ name: 'order' });
                }
            })
        }
    })
}
</script>

<style scoped>
.el-form {
    .el-form-item {
        width: 400px;
        .el-input-number{
            width: 300px;
        }
    }
}
</style>